<template>
  <div>
    <div class="mbtOP">
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>茶叶</el-breadcrumb-item>
              <el-breadcrumb-item>全部</el-breadcrumb-item>
              <el-breadcrumb-item>列表</el-breadcrumb-item>
              <el-breadcrumb-item>
                {{$route.params.tea}}
                <!-- {{$store.state.arr}} -->
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div></el-col
        >
      </el-row>
    </div>
    <div class="contentcymb">
      <div class="contentcymb_child">
        <!-- {{$route.params.tea}} -->
        <div class="box">
          <div class="clearfix">
            <div class="list">
              <div class="active">
                <img
                  src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="https://gd2.alicdn.com/imgextra/i2/3364906340/O1CN01tAQhnE1whlbjQs5my_!!3364906340.jpg_400x400.jpg"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="https://gd1.alicdn.com/imgextra/i1/3364906340/O1CN01jjPapq1whlbn1QAnB_!!3364906340.jpg_400x400.jpg"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="https://gd2.alicdn.com/imgextra/i2/3364906340/O1CN01oCDMEA1whlblRxkBq_!!3364906340.jpg_400x400.jpg"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="https://gd1.alicdn.com/imgextra/i1/3364906340/O1CN01vXqYP11whlblRxXi1_!!3364906340.jpg_400x400.jpg"
                  alt=""
                />
              </div>
              <span></span>
            </div>
            <div class="big">
              <div class="active">
                <img
                  src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="https://gd2.alicdn.com/imgextra/i2/3364906340/O1CN01tAQhnE1whlbjQs5my_!!3364906340.jpg_800x800.jpg"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="https://gd1.alicdn.com/imgextra/i1/3364906340/O1CN01jjPapq1whlbn1QAnB_!!3364906340.jpg_800x800.jpg"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="https://gd2.alicdn.com/imgextra/i2/3364906340/O1CN01oCDMEA1whlblRxkBq_!!3364906340.jpg_800x800.jpg"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="https://gd1.alicdn.com/imgextra/i1/3364906340/O1CN01vXqYP11whlblRxXi1_!!3364906340.jpg_800x800.jpg"
                  alt=""
                />
              </div>
            </div>
          </div>

          <div class="sm">
            <ul>
              <li class="rb">
                <img
                  src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp"
                  alt=""
                />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import fdj from "../component/FAJ";

  export default {
    fdj,
    activated() {
      console.log(this.$route);
    },
    data() {
      return {
        arrcys: [
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "茉莉花茶",
            jia: "￥223.0"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wYWQzN2JkNDA4Y2NhYzBjMjRjYmY3N2IwNmI0ODg4MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "白牡丹",
            jia: "￥1，2350"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC85Nzg1NTAwNmNjMDUwNDU4ZWQwMWZmMTY3YjhiM2Q5Ny00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "白毫银针",
            jia: "￥258.0"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wMzMyODZmNzRlZTgzZmIzZTkxOWVlODAwNzgyNGM1MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "云南普洱",
            jia: "￥500.0"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yNjVmNTg1ZTlmY2ZiOTEwMGUzNzViYWQwNDI1OTAzMS00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "湖北老青茶",
            jia: "￥400.0"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "霍山黄芽濛而银针",
            jia: "￥711.0"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "茉莉花茶",
            jia: "￥223.0"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wYWQzN2JkNDA4Y2NhYzBjMjRjYmY3N2IwNmI0ODg4MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "白牡丹",
            jia: "￥1，2350"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC85Nzg1NTAwNmNjMDUwNDU4ZWQwMWZmMTY3YjhiM2Q5Ny00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "白毫银针",
            jia: "￥258.0"
          },
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wMzMyODZmNzRlZTgzZmIzZTkxOWVlODAwNzgyNGM1MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "云南普洱",
            jia: "￥500.0"
          }
        ],
        arrq: [
          {
            img:
              "https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp",
            text: "茉莉花茶",
            jia: "￥223.0"
          }
        ]
      };
    }
  };
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .contentcymb {
    width: 100%;
    min-height: 500px;
    background: gold;
    padding: 30px;
  }
  .contentcymb_child {
    width: 80%;
    min-height: 800px;
    margin: auto;
  }
  .mbtOP {
    margin-top: 100px;
    line-height: 100px;
  }
  .el-row {
    margin-bottom: 20px;
    text-align: center;
    line-height: 36px;
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .list {
    /* width: 400px;
        height: 400px; */
    float: left;
    /* overflow: hidden; */
    position: relative;
  }

  .list div {
    width: 100%;
    height: 100%;
    display: none;
  }

  .list span {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    background: url(https://gtms01.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png);
    display: none;
  }

  .big {
    width: 400px;
    height: 400px;
    float: left;
    display: none;
    overflow: hidden;
    position: relative;
  }

  .box .active {
    display: block;
  }

  .big div {
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
  }
  .big div img {
    width: 800px;
    height: 800px;
  }
  .big img {
    position: absolute;
    left: 0;
    top: 0;
  }

  .clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
  .sm li {
    float: left;
    margin: 8px;
    border: 1px solid transparent;
  }

  .sm .active {
    border: 1px solid black;
  }
  .sm {
    width: 100px;
    height: 100px;
  }
  .sm img {
    width: 100%;
    height: 100%;
  }
</style>
